<template>
<div class="wd-cursp wd-column-hover">
    <div class="wd-cursp_label">
        <slot :data="dataColumn">
            <a-tooltip placement="top">
                <template #title>
                    <span> {{dataColumn}}</span>
                </template>
                <span> {{dataColumn}}</span>
            </a-tooltip>
        </slot>
    </div>
    <div class="wd-cursp_operation">
        <svg class="wd-cursp-icon-sm icon-sm" aria-hidden="true" v-if="isShow===true" @click="onClick()">
            <use :xlink:href="icon?icon:'#iconbianji'" />
        </svg>
    </div>
</div>
</template>

<script lang="ts">
import { computed, defineComponent, PropType } from 'vue'
// import { Tooltip } from 'ant-design-vue'
export default defineComponent({
  name: 'column_hover',
  props: {
    data: {
      type: [String, Object] as PropType < any | string >
    },
    isShow: {
      type: Boolean as PropType<boolean>
    },
    icon: {
      type: String
    }
  },
  setup (props, ctx) {
    const isArrary = (arr: any): boolean => {
      return Array.isArray(arr)
    }
    const dataColumn = computed(() => {
      if (isArrary(props.data) === true) {
        return (props.data as Array < any >).join(',')
      }
      return props.data
    })
    const onClick = () => {
      ctx.emit('onClick')
    }
    return {
      dataColumn,
      onClick,
      isArrary
    }
  },
  methods: {},
  components: {
    // 'a-tooltip': Tooltip
  }
})
</script>
